<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="dels">批量删除</el-button>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="primary" @click="update()">修改</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="interfaceNo"
        label="服务编号"
        width="180"
      />
      <el-table-column
        prop="interfaceName"
        label="服务编程"
        width="180"
      />
      <el-table-column
        prop="interfaceType"
        label="类型"
      />
      <el-table-column
        prop="interfaceTag"
        label="类别"
      />
      <el-table-column
        prop=""
        label="地址"
      />
    </el-table>
    <el-pagination
      :current-page="currentPage4"
      :page-sizes="[10,15,20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="form.pageNum"
      @current-change="form.pageSize"
    />

    <el-dialog title="接口管理" :visible.sync="dialogFormVisible">
      <el-form :model="saveform">
        <el-form-item v-show="flag=='add'" label="接口编号" :label-width="formLabelWidth">
          <el-input v-model="saveform.interfaceNo" autocomplete="off" />
        </el-form-item>
        <el-form-item label="接口名称" :label-width="formLabelWidth">
          <el-input v-model="saveform.interfaceName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="接口类型" :label-width="formLabelWidth">
          <el-input v-model="saveform.interfaceType" autocomplete="off" />
        </el-form-item>
        <el-form-item label="接口类别" :label-width="formLabelWidth">
          <el-input v-model="saveform.interfaceTag" autocomplete="off" />
        </el-form-item>
        <el-form-item label="表视图多个用';'分割" :label-width="formLabelWidth">
          <el-input v-model="saveform.tableName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序字段" :label-width="formLabelWidth">
          <el-input v-model="saveform.pkColumn" autocomplete="off" />
        </el-form-item>
        <el-form-item label="范围查询字段" :label-width="formLabelWidth">
          <el-input v-model="saveform.compareColumn" autocomplete="off" />
        </el-form-item>
        <el-form-item label="模糊查询字段" :label-width="formLabelWidth">
          <el-input v-model="saveform.likeColumns" autocomplete="off" />
        </el-form-item>
        <el-form-item label="主键" :label-width="formLabelWidth">
          <el-input v-model="saveform.interfaceOrder" autocomplete="off" />
        </el-form-item>
        <el-form-item label="子表视图" :label-width="formLabelWidth">
          <el-input v-model="saveform.subPkColumn" autocomplete="off" />
        </el-form-item>
        <el-form-item label="子表主键" :label-width="formLabelWidth">
          <el-input v-model="saveform.subTableName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="子表外键" :label-width="formLabelWidth">
          <el-input v-model="saveform.subFkColumn" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证方式">
          <el-radio-group v-model="form.likeColumns">
            <el-radio :label="0">通过</el-radio>
            <el-radio :label="1">不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="自定义类型">
          <el-radio-group v-model="form.sqlType">
            <el-radio :label="0">忽略</el-radio>
            <el-radio :label="1">追加</el-radio>
            <el-radio :label="2">替换猪</el-radio>
            <el-radio :label="3">追加猪</el-radio>
            <el-radio :label="4">大肥猪</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自定义sql语句" :label-width="formLabelWidth">
          <el-input v-model="saveform.userDefinedSql" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: null,
      Arrays: [],
      formLabelWidth: '200',
      dialogFormVisible: false,
      form: {
        pageNum: null,
        pageSize: null
      },
      saveform: {
        interfaceNo: '',
        interfaceName: '',
        interfaceType: '',
        interfaceTag: '',
        tableName: '',
        pkColumn: '',
        compareColumn: '',
        likeColumns: '',
        interfaceOrder: '',
        subPkColumn: '',
        subTableName: '',
        subFkColumn: '',
        createuser: '',
        sqlType: '',
        userDefinedSql: ''

      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-interface-info/interface/list', { params: this.form }).then((response) => {
        this.tableData = response.data.obj.list
        this.form.pageNum = response.data.obj.pageNum
        this.form.pageSize = response.data.obj.pageSize
        this.total = response.data.obj.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.form.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.form.pageNum = val
      this.init()
    },
    handleSelectionChange(rows) {
      this.Arrays = new Array()
      for (const row of rows) {
        this.Arrays.push(row.interfaceNo)
      }
    },
    dels() {
      var ids = this.Arrays.join(',')
      this.axios.get('http://127.0.0.1/api/sys/wish/sys-interface-info/interface/dels?ids=' + ids).then((response) => {
        alert('aaa')
        if (response.data) {
          alert('删除成功')
          this.init()
        } else {
          alert('删除失败')
        }
      })
    },
    add() {
      this.dialogFormVisible = true
      this.flag = 'add'
      this.saveform.interfaceNo = ''
      this.saveform.interfaceName = ''
      this.saveform.interfaceType = '',
        this.saveform.interfaceTag = '',
        this.saveform.tableName = '',
        this.saveform.pkColumn = '',
        this.saveform.compareColumn = '',
        this.saveform.likeColumns = '',
        this.saveform.interfaceOrder = '',
        this.saveform.subPkColumn = '',
        this.saveform.subTableName = '',
        this.saveform.subFkColumn = '',
        this.saveform.createuser = '',
        this.saveform.sqlType = '',
        this.saveform.userDefinedSql = ''
    },

    update(data) {
      if (this.Arrays.length > 1 || this.Arrays.length < 1) {
        alert('请选择一条数据')
      } else {
        this.axios.post('http://127.0.0.1/api/sys/wish/sys-interface-info/interface/getOne?interfaceNo=' + this.Arrays[0]).then((response) => {
          this.dialogFormVisible = true
          this.flag = 'update'
          this.saveform.interfaceNo = response.data.interfaceNo
          this.saveform.interfaceName = response.data.interfaceName
          this.saveform.interfaceType = response.data.interfaceType
          this.saveform.interfaceTag = response.data.interfaceTag
          this.saveform.tableName = response.data.tableName
          this.saveform.pkColumn = response.data.pkColumn
          this.saveform.compareColumn = response.data.compareColumn
          this.saveform.likeColumns = response.data.likeColumns
          this.saveform.interfaceOrder = response.data.interfaceOrder
          this.saveform.subPkColumn = response.data.subPkColumn
          this.saveform.subTableName = response.data.subTableName
          this.saveform.subFkColumn = response.data.subFkColumn
          this.saveform.createuser = response.data.createuser
          this.saveform.sqlType = response.data.sqlType
          this.saveform.userDefinedSql = response.data.userDefinedSql
        })
      }
    },
    save() {
      let url = ''
      if (this.flag == 'add') {
        url = 'http://127.0.0.1/api/sys/wish/sys-interface-info/interface/add'
      } else if (this.flag == 'update') {
        url = 'http://127.0.0.1/api/sys/wish/sys-interface-info/interface/update?id=' + this.Arrays[0]
      }
      this.axios.post(url, this.saveform).then((response) => {
        if (response.data) {
          alert('保存成功')
          this.dialogFormVisible = false
          this.init()
        } else {
          alert('保存失败')
        }
      })
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

